<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>孙琦和杨乐的期末作业孙琦Y211030329杨乐Y211030328</title>
    <title>孙琦和杨乐的期末作业孙琦Y211030329杨乐Y211030328</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <script> 
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?d54f110c773cfc933a9acea59426a0ff";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.12/fullpage.css"
        integrity="sha512-c2/xySTiUmIa2PzQAnKZVYi2+aJmyaI6rweK5GCL1HbHx70/Zub0RhYPy5RFbJsStRo+HTForawyFBgBp6btJA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />

    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css
    " />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>

    <style>
        #section1 {
            background-image: url(发如雪d.png);
            background-size: 100% 100%;
            display: flex;


            justify-content: center;

        }



        #section1 h1 {
            text-align: center;
            margin: 50px 50px;
            font-family: 'Courier New', Courier, monospace;
            font-weight: 2500;
            color: #fff;
            line-height: 8;
            font-size: 60px;

        }

        h3 {
            font-family: 'Courier New', Courier, monospace;
            font-weight: 2500;
            color: #fff;
            font-size: 40px;
        }

        #section3 {
            background-image: url(东风破.png);
            background-size: 100% 100%;
            color: #fff;
        }

        #page2 {
            background-image: url(青花瓷.png);
            background-size: 100% 100%;
        }

        .list-unstyled {
            list-style: none;
        }

        #myMenu {
            position: fixed;
            right: 40px;
            top: 20%;
            z-index: 999;
        }

        #myMenu a {
            color: #fff;
            text-decoration: none;
            line-height: 2;
        }

        #section3 .container {
            padding-top: 180px;
        }

        #section3 .ul {
            padding-top: 180px;
        }

        ul li a {

            font-size: 20px;
            line-height: 3;
        }

        p {
            font-size: 18px;
            text-align: justify;
            line-height: 2.5;
            color: #fff;
        }
    </style>
</head>

<body>
    <ul id="myMenu" class="list-unstyled">
        <li data-menuanchor="firstpage" class="active">
            <a href="#firstpage">返回首页</a>
        </li>

        <li data-menuanchor="seconddpage">
            <a href="#secondpage">欣赏</a>
        </li>
        <li data-menuanchor="thirdpage">
            <a href="#thirdpage">专辑</a>
        </li>

        <li data-menuanchor="forthpage">
            <a href="#forthpage">空间</a>
        </li>
    </ul>
    <div id="fullpage">
        <div class="section" id="section1">
            <h1 class="title">再次认识周杰伦</h1>



        </div>

        <div class="section" id="section3">
            <div class="container">
                <h3 class="my-5 text-center">欣赏</h3>
                <div class="row" style=" color: #fff;">

                    <div class="col-md-5">


                        <img width="350" height="400" alt="" src="周杰伦专辑9.jpg">
                    </div>

                    <div class="col-md-7">
                        <p>「等待周杰伦
                            是一个庞大群体的内心秘密」</p>
                        <p> 这是很多人的心声</p>
                        <p> 不论有人说他是江郎才尽</p>
                        <p> 还是有人说他是伤仲永</p>
                        <p> 但他依然是最传奇的歌手</p>



                    </div>
                </div>

            </div>
        </div>
        <div class="section" id="section3">
            <div class="container">
                <h3 class="my-5 text-center">专辑</h3>
                <div class="row">

                    <div class="col-sm text-center">

                        <p class="text-center">周杰伦说过
                            “每一张专辑一定要
                            有一首中国风的歌曲”
                            他实现了他的诺言
                            14张专辑+1张EP+2次作曲
                            30首中国风歌曲</p>
                        </p>说尽了周董16年的风花雪月</p>

                        <img src="" width="350" height="400" alt="" srcset="周杰伦照片.jpg">
                        <p class="text-center"> 周杰伦是将中国风歌曲发扬光大的第一人
                            也是中国风流行歌曲最杰出的代表人物</p>
                        <img src="" width="500" height="400" alt="" srcset="东风破.png">
                        <p>周杰伦无疑是弘扬中华传统文化的代表人物之一
                            不难从他的歌词中看出
                            大部分人心中肯定有个尺子，曲风东方意蕴显著、歌词复古婉转、配乐使用中国乐器，这是大多数中国风歌曲的标配，
                            而歌词就是核心中的核心，方文山就说过：“我的中国风就是将旧有的东西加上了现代东西…中国风的精髓在于文字。它不像嘻哈之类风格的是用曲去表现，它是用文字。歌词就是画面的营造。在遣字用词上面用古典化的技巧，不一定是古音节，而一定要用中国意境去创造”。
                            他曾经写过一篇文章《“中国风”歌词游戏十六法》，来教大家写中国风歌词——感叹、譬喻、类迭、转化、排比、夸饰、转品、倒装、摹写、引用、析字、映衬、设问、示现、顶真、对偶。

                        </p>
                        <img src="" width="500" height="400" alt="" srcset="青花瓷.png">
                        <p>比如《青花瓷》里的“帘外芭蕉惹骤雨，门环惹铜绿，而我路过那江南小镇惹了你”。其中，惹就是迭字，让被动意象的门环、芭蕉活了起来。</p>
                        <p>比如《东风破》里的“一盏离愁孤单伫立在窗口，我在门后假装你人还没走。旧地如重游月圆更寂寞，夜半清醒的烛火不忍苛责我...”
                            ，离愁、孤单、烛火都是转化成可触摸的实体，与“问君能有几多愁，恰似一江春水向东流”有异曲同工之妙。
                        </p>

                    </div>
                </div>
            </div>
        </div>

        <div class="section" id="page2">

            <div class="container">
                <h3 class="my-5 text-center">空间</h3>
                <div class="row gx-4">
                    <div class="col-sm-6">
                        <img src="" width="500" height="400" alt="" srcset="发如雪d.png">
                        <p>在《得体性与中国传统文化》中写道：“中国文化的悠久历史，使得一些普通的东西、景物带上了浓郁的文化气息，它们出现在文学作品中组成了特定的意象，成了汉民族传统文化的载体”。
                            周杰伦歌曲中的意象：
                            娘子/杨柳/溪边/塞北/江湖/江南/红豆
                            春联/米缸/楷书/雕花/门窗/砖墙/吴侬软语
                            外滩/白墙黑瓦少林/武当/丹田/太极/嵩山</p>

                    </div>
                    <div class="col-sm-6">
                        <img src="" width="500" height="400" alt="" srcset="周杰伦37.jpg">
                        <p>周杰伦真正开辟了一个中国风的时代</p>

                        <p> 在写了28首中国风歌曲之后，他在2016年的《周杰伦的床边故事》的《土耳其冰激凌》中写到：“谁说拍中国风，一定要配灯笼；谁说写中国风，一定要商角徵羽宫；我干脆自己下车，指挥乐坛的交通”。
                        </p>


                    </div>


                </div>




                <div class="container">
                    <div class="row">

                        <img src="" width="500" height="400" alt="" srcset="周杰伦71655.jpg">
                        <p>除了选用大量的古典文化意象，直接引用古诗词也是周杰伦中国风歌曲的常用手段，比如《念奴娇》基本就是苏轼《念奴娇·赤壁怀古》的翻写。
                            《千里之外》的“故事在城外，浓雾散不开，看不清对白”，与柳永的《雨霖铃·寒蝉凄切》的“执手相看泪眼，竟无语凝噎”有着妙不可言的联系。</p>
                        <img src="" width="500" height="400" alt="" srcset="诗意90.jpg">
                        <p>了解了这些后你有没有再次认识周杰伦呢</p>

                    </div>
                </div>
            </div>
        </div>

        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.12/fullpage.min.js"
            integrity="sha512-2N6afhHcaOPaBztibhzvEp9MBtXoG+6YQ5AkllMJKHrZKUUiHHmIc1bEafMDjG+LnTtSIYjaKdg2BdZqqZkkBQ=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script>
            $(document).ready(function () {
                //initialising fullpage.js in the jQuery way
                $("#fullpage").fullpage({
                    anchors: ["firstpage", "secondpage", "thirdpage", "forthpage"],
                    menu: "#myMenu",
                    // verticalCentered: false,
                    credits: null,
                    //   afterRender: function () {
                    //     var pluginContainer = this;
                    //     alert("DOM结构已完成");
                    //   },
                    afterLoad: function (origin, destination, direction, trigger) {
                        console.log(origin, destination, direction, trigger);
                        // if (destination.anchor == "firstpage") {
                        //     $("#myMenu").hide();
                        // } else {
                        //     $("#myMenu").show();
                        // }
                        // if (destination.anchor == "secondpage") {
                        //     $("#myMenu a").css({ color: "black" });
                        // } else {
                        //     $("#myMenu a").css({ color: "black" });
                        // }
                    },
                });
            });
        </script>
</body>

</html>